<!-- 合同收付款 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">合同收付款</span>
      </div>
      <div class="box">
        <div class="left">
          <p>合同收款</p>
          <div id="payColChart1" style="width: 100%;height:300px"></div>
          <div class="bottom-info">
            <div>
              <p>合同金额</p>
              <span>775万</span>
            </div>
            <div>
              <p>收款金额</p>
              <span>319万</span>
            </div>
            <div>
              <p>待收金额</p>
              <span>456万</span>
            </div>
          </div>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="right">
          <p>合同付款</p>
          <div id="payColChart2" style="width: 100%;height:300px"></div>
          <div class="bottom-info">
            <div>
              <p>合同金额</p>
              <span>775万</span>
            </div>
            <div>
              <p>收款金额</p>
              <span>319万</span>
            </div>
            <div>
              <p>待收金额</p>
              <span>456万</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined,
      chart2: undefined
    }
  },
  props: {
    tabNum: {
      type: String,
      default: '0'
    }
  },
  watch: {
    tabNum() {
      this.$nextTick(() => {
        this.chart.resize();
        this.chart2.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1()
      this.initChart2()
    })
  },
  methods: {
    initChart1() {
      const ctx = document.getElementById('payColChart1')
      this.chart = echarts.init(ctx)
      
      const startAngle = 220
      const endAngle = -40
      let option = {
        backgroundColor: '#fff',
        title: [
            {
              text: `{value|${41.2}%}\n{name|${'收款比率'}}`,
              left: 'center',
              bottom: '23%',
              textStyle: {
                  rich: {
                    value: {
                        fontSize: '20',
                        fontWeight: '900',
                        color: 'green',
                        padding: [8, 0]
                    },
                    name: {
                        fontSize: '14',
                        color: 'green'
                    }
                  }
              }
            }
        ],
        series: [
            {
              name: '最外层-刻度尺',
              type: 'gauge',
              radius: '55%',
              startAngle,
              endAngle,
              axisLine: {
                  lineStyle: {
                    color: [[1, 'green']],
                    width: 1
                  }
              },
              axisTick: {
                  distance: -6,
                  length: 7,
                  lineStyle: {
                    color: 'green'
                  },
                  splitNumber: 10
              },
              splitLine: {
                  distance: -11,
                  length: 14,
                  lineStyle: {
                    color: 'green',
                    width: 1
                  }
              },
              axisLabel: {
                  show: false
              },
              pointer: {
                  show: false
              }
            },
            {
              name: '内层带指针',
              type: 'gauge',
              radius: '52%',
              startAngle,
              endAngle,
              axisLine: {
                  lineStyle: {
                    color: [[1, '#abd79e']],
                    width: 20
                  }
              },
              axisTick: {
                  show: false
              },
              splitLine: {
                  show: false
              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'green',
                      fontSize: '10px'
                  }
              },
              detail: {
                  show: false
              },
              pointer: {
                  show: true,
                  length: '86%',
                  width: 10,
                  itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                              offset: 0,
                              color: 'green'
                          },
                          {
                              offset: 1,
                              color: '#abd79e'
                          }
                        ]
                    }
                  }
              },
              progress: {
                  show: true,
                  width: 20,
                  itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                              offset: 0,
                              color: 'green'
                          },
                          {
                              offset: 1,
                              color: '#9bd08c'
                          }
                        ]
                    }
                  }
              },
              data: [
                  {
                    value: 43
                  }
              ]
            },
            {
              name: '中心效果圆',
              type: 'gauge',
              radius: '14%',
              startAngle: 0,
              endAngle: 360,
              axisLine: {
                  lineStyle: {
                    color: [[1, 'green']],
                    width: 1
                  }
              },
              axisTick: {
                  show: false
              },
              splitLine: {
                  show: false
              },
              axisLabel: {
                  show: false
              },
              detail: {
                  show: false
              },
              pointer: {
                  show: false
              },
              progress: {
                  show: true,
                  width: 1,
                  itemStyle: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                          {
                              offset: 0,
                              color: '#abd79e'
                          },
                          {
                              offset: 0.7,
                              color: '#9bd08c'
                          },
                          {
                              offset: 1,
                              color: 'green'
                          }
                        ]
                    }
                  }
              },
              data: [
                  {
                    value: 100
                  }
              ]
            },
            {
              type: 'pie',
              radius: ['70%', '69.5%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                    normal: {
                        color: 'green'
                    }
              },
              label: {
                    show: false
              },
              data: [100]
            }
        ]
      }
      this.chart.setOption(option)
    },
    initChart2() {
      const ctx = document.getElementById('payColChart2')
      this.chart2 = echarts.init(ctx)
      
      const startAngle = 220
      const endAngle = -40
      let option = {
        backgroundColor: '#fff',
        title: [
            {
              text: `{value|${70.1}%}\n{name|${'收款比率'}}`,
              left: 'center',
              bottom: '23%',
              textStyle: {
                  rich: {
                    value: {
                        fontSize: '20',
                        fontWeight: '900',
                        color: 'green',
                        padding: [8, 0]
                    },
                    name: {
                        fontSize: '14',
                        color: 'green'
                    }
                  }
              }
            }
        ],
        series: [
            {
              name: '最外层-刻度尺',
              type: 'gauge',
              radius: '55%',
              startAngle,
              endAngle,
              axisLine: {
                  lineStyle: {
                    color: [[1, 'green']],
                    width: 1
                  }
              },
              axisTick: {
                  distance: -6,
                  length: 7,
                  lineStyle: {
                    color: 'green'
                  },
                  splitNumber: 10
              },
              splitLine: {
                  distance: -11,
                  length: 14,
                  lineStyle: {
                    color: 'green',
                    width: 1
                  }
              },
              axisLabel: {
                  show: false
              },
              pointer: {
                  show: false
              }
            },
            {
              name: '内层带指针',
              type: 'gauge',
              radius: '52%',
              startAngle,
              endAngle,
              axisLine: {
                  lineStyle: {
                    color: [[1, '#abd79e']],
                    width: 20
                  }
              },
              axisTick: {
                  show: false
              },
              splitLine: {
                  show: false
              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'green',
                      fontSize: '10px'
                  }
              },
              detail: {
                  show: false
              },
              pointer: {
                  show: true,
                  length: '86%',
                  width: 10,
                  itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                              offset: 0,
                              color: 'green'
                          },
                          {
                              offset: 1,
                              color: '#abd79e'
                          }
                        ]
                    }
                  }
              },
              progress: {
                  show: true,
                  width: 20,
                  itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                              offset: 0,
                              color: 'green'
                          },
                          {
                              offset: 1,
                              color: '#9bd08c'
                          }
                        ]
                    }
                  }
              },
              data: [
                  {
                    value: 70
                  }
              ]
            },
            {
              name: '中心效果圆',
              type: 'gauge',
              radius: '14%',
              startAngle: 0,
              endAngle: 360,
              axisLine: {
                  lineStyle: {
                    color: [[1, 'green']],
                    width: 1
                  }
              },
              axisTick: {
                  show: false
              },
              splitLine: {
                  show: false
              },
              axisLabel: {
                  show: false
              },
              detail: {
                  show: false
              },
              pointer: {
                  show: false
              },
              progress: {
                  show: true,
                  width: 1,
                  itemStyle: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                          {
                              offset: 0,
                              color: '#abd79e'
                          },
                          {
                              offset: 0.7,
                              color: '#9bd08c'
                          },
                          {
                              offset: 1,
                              color: 'green'
                          }
                        ]
                    }
                  }
              },
              data: [
                  {
                    value: 100
                  }
              ]
            },
            {
              type: 'pie',
              radius: ['70%', '69.5%'],
              hoverAnimation: false,
              clockWise: false,
              itemStyle: {
                    normal: {
                        color: 'green'
                    }
              },
              label: {
                    show: false
              },
              data: [100]
            }
        ]
      }
      this.chart2.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  .left,.right {
    width: 50%;
    p {
      margin: 0;
      width: 100%;
      color: green;
      font-weight: 900;
      text-align: center;
    }
    .bottom-info {
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      p {
        color: #333;
        font-weight: 400;
        font-size: 14px;
      }
      span {
        color: green;
        font-size: 20px;
        font-weight: 900;
      }
    }
  }
  ::v-deep .el-divider {
    margin-top: 20px;
    height: 300px;
    z-index: 999;
  }
}
</style>